<script setup lang="ts">
import { computed, onMounted, reactive, ref, useAttrs, watch } from 'vue';
import { UPDATE_MODEL_EVENT } from '@jctech/constants/event';
import { textareaEmits, textareaProps } from './textareaSrc';

const props = defineProps(textareaProps);

const emits = defineEmits(textareaEmits);

defineOptions({
  name: 'CTextarea'
});

const textareaRef = ref(null);

const attrs = useAttrs();
const handleUpdate = (value) => {
  const _value = value;

  emits(UPDATE_MODEL_EVENT, _value);
};
</script>

<template>
  <el-form-item :label="props.label" :prop="props.prop" class="jctech-control-wrapper jc-textbox-wrapper">
    <el-input
      ref="inputRef"
      type="textarea"
      v-bind="{ ...attrs, ...props }"
      :model-value="props.modelValue"
      :disabled="!props.isEnabled"
      :readonly="props.isReadOnly"
      @update:modelValue="handleUpdate"
    />
  </el-form-item>
</template>

<style lang="less"></style>
